JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at how to add polyfills and language features to our app to add features that aren’t built into the browsers we’re targeting.
Polyfills
Polyfills are important for making our client-side JavaScript code robust. Polyfills are scripts that add features that browsers may not otherwise support.
It implements particular JavaScript APIs that browsers may not support yet. Part of the JavaScript standard library that isn’t available in the browser that we’re targeting also need polyfills.
They’re just libraries that we add just like any other library. For instance, some API like the Fetch API or the Network Information API may not be available yet.
However, we want to use them so that we can make HTTP requests adding an extra library or watching for network connection type changes respectively.
Then we need to add polyfills for them. If we need to add support for the Fetch API for browsers that don’t support them, then we need to install a Fetch polyfill by following the instructions at https://github.com/github/fetch.
We should only use the polyfill version if the native version isn’t available as the native version is faster since it’s built into the browser rather than added on the fly.
Likewise, there’s a Network Information API polyfill at https://www.npmjs.com/package/network-information-api-polyfill so that we can use the Network Information API in older browsers.
New features added to browser global objects like Array may also need a polyfill for them to work.
For instance, if we need to use the array instance’s find method in IE, then we need to add a polyfill for it. The script for it is available at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find.
There’s also which is a one-stop-shop for all the polyfills we need to add new native features to browsers that may not be available.
Some features like audio and video stream access do not have polyfills as they require native hardware support. Therefore, those features would need to be disabled in our app if our app supports an old browser that doesn’t have this feature built-in.
The Babel Compiler
To add new JavaScript features that many browsers don’t support out of the box, we would need to add a compile step to our browser so that when we use new JavaScript language features in our app, that it would compile down into code that’s compatible with the browsers that we target.
We can use the Babel compiler to do that. It supports all current features in addition to ones that are experimental.
It’s better to stick with the current ones in a production app as the experimental ones are subject to breaking changes.
Changes that are to become standard are in Stage 4, which means that they’ll be added as a standard for sure into the JavaScript language.
Useful JavaScript features that are to become standard are ones like the optional chaining operator.
For instance, if we have a plain JavaScript that’s compiled with Parcel, which comes with Babel already, then we can add the @babel/plugin-proposal-optional-chaining Babel plugin by running:
npm i @babel/plugin-proposal-optional-chaining
Then in the .babelrc file of the project, we add:
{
"plugins": \[
"@babel/plugin-proposal-optional-chaining"
\]
}
Then we can use it on our JavaScript code adding:
const foo = {};
const x = foo?.bar?.baz;
console.log(x);
Babel supports many more features than just the optional chaining operator. It also works with both Node.js and client-side JavaScript.
Pretty much any more JavaScript features are supported with Babel, mostly without plugins. Features like let , const , for...of , modules, maps, sets, symbols, rest and spread operators, destructuring, etc. are all supported by Babel.
We can also add Babel as a script for legacy apps or for prototyping by adding:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
to our HTML.
Then if we have a script tag with the type attribute set to text/babel , then we can add modern Javascript features without worrying about breaking the app in old browsers.
Conclusion
Polyfills are scripts that add support for features that may not be available in old browsers.
To add native JavaScript features that may not be available in the browser that our app is targeting, we can use the Babel compiler to add support for them. We can also add Babel plugins to support more cutting edge features.
In addition, we can compile modern JavaScript code on the fly by using the script tag version of Babel and add our own scripts with the type attribute set to text/babel to add support for it without building.
